<template>
  <div class="home-box">
    <!-- 背景图 -->
    <img :src="assetsImageUrl + '/images/home/bg.png'" alt="" class="bg">

    <!-- 规则以及我的奖品 -->
    <div class="rule-prize">
      <!-- <img src="/images/home/rule-icon.png" alt="" @click="()=>  state.rulePage = true"> -->
      <!-- <div class="toolbar-btn" @click="handleShare">
        <div class="text-vertical">
          <span>分</span>
          <span>享</span>
        </div>
      </div> -->
      <div class="toolbar-btn" @click="() => state.rulePage = true">
        <div class="text-vertical">
          <span>活</span>
          <span>动</span>
          <span>规</span>
          <span>则</span>
        </div>
      </div>
      <div class="toolbar-btn" @click="() => state.prizePage = true">
        <div class="text-vertical">
          <span>我</span>
          <span>的</span>
          <span>奖</span>
          <span>品</span>
        </div>
      </div>
    </div>

    <!-- 标题 -->
    <!-- <div class="title">
      <img :src="assetsImageUrl + 'images/home/title.png'" alt="">
    </div> -->
    <!-- 按钮 -->
    <div class="footer">
      <!-- <img src="/images/home/btn.png" alt="">   -->
      <div class="box_shadow">
        <div class="tr_t" @click="goGame">开启挑战</div>
        <img class="handicon" :src="assetsImageUrl + '/images/handicon.png'" alt="">
      </div>
      <div class="box_shadow">
        <div class="tr_t" @click="goRanking">智电积分</div>
      </div>
    </div>

    <!-- 分享示范 -->
    <Share v-if="state.show_share_indication" @handleClose="state.show_share_indication = false"></Share>

    <Rule @handleClose="state.rulePage = false" :isShow="state.rulePage"></Rule>
    <Prize @handleClose="handlePrizeClose" :isShow="state.prizePage" v-if="state.prizePage"></Prize>
    <Popover @handleClose="state.popoverPage = false" :isShow="state.popoverPage" msg="本次活动仅限UNI认证车主参与"></Popover>
    <!-- 奖励弹窗 -->
    <Popover
        :title="state.popoverTitle"
        :isShow="state.PopoverRank"
        :tips="state.popoverTips"
        :icon="state.popoverIcon"
        @handleClose="state.PopoverRank = false;">
        <div>
          在U星能排行榜中排名第{{state.popoverRack}}名<br />
          {{ state.popoverMsg }}
        </div>
    </Popover>

    <Popover
        :title="state.popoverTimesTitle"
        :isShow="state.popoverTimes"
        @handleClose="state.popoverTimes = false;">
        <div>
          <p v-html="state.popoverTimesMsg"></p>
          <!-- {{ state.popoverTimesMsg }} -->
        </div>
    </Popover>
    <GameOver 
      :is-show="state.showGameOver"
      :title="state.gameTips"
      close
      @handle-close="state.showGameOver = false"
    />
    
    <!-- <van-dialog v-model:show="state.myDialog" title="安全验证" show-cancel-button>
      <div id='sc'></div>
    </van-dialog> -->
    <van-action-sheet v-model:show="awscShow" title="安全验证">
      <div class="awsc-content"><div id='sc'></div></div>
      <!-- <van-button type="default" @click="state.myDialog = false">取消</van-button> -->
    </van-action-sheet>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick } from "vue"
import { useRouter } from 'vue-router'
import { ActionSheet, Button } from 'vant'
import Rule from "../components/Rule.vue"
import Prize from "../components/Prize.vue"
import Popover from "../components/MyPopover.vue"
import Share from "../components/ShareIndication.vue"
import { getUserData, userAuth, weekGift, gameTimes, shareRecord, userInfoModify, userActivity } from "../api/index"
import utils from "../utils";
import GameOver from '../components/GameOver.vue'
import { watch } from "vue"
const props = defineProps({
  isLogin: Boolean
})
const router = useRouter()

const assetsImageUrl = ref(import.meta.env.VITE_ASSETS_IMAGE_URL)
const awscShow = ref(false)
const close = ref(false)
const state = reactive(
  {
    time: null,
    rulePage: false,
    prizePage: false,
    popoverPage: false,
    PopoverRank: false,
    popoverTitle: '恭喜您',
    popoverIcon: null,
    popoverMsg: '',
    popoverTips: false,
    popoverRack: null,
    // successPage: false,
    show_share_indication: false,
    myDialog: false,
    numTimes: 0,
    popoverTimes: false,
    popoverTimesTitle: '',
    popoverTimesMsg: '',
    errNum: 0,
    showGameOver: false,
    gameTips: '',
    showShare: false
  }
)
watch(() => props.isLogin, (value) => {
  if(value) {
    // console.log('value',value,'vvvvv')
    state.rulePage = true
  }
})
let ic = null
// appKey, scene
const appKey = 'FFFF0N0000000000B5BA';
const scene = 'ic_activity_h5';

function initSlider(cb) {
  // 实例化ic对象
  AWSC.use('ic', function (state, module) {
    // 初始化
    ic = module.init({
      // 应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
      appkey: appKey,
      // 使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
      scene,
      // 声明智能验证需要渲染的目标元素ID。
      renderTo: 'sc',
      // 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
      success: function (data) {
        cb && cb(data)
        // ic.reset();
        // awscShow.value = false;
        // setTimeout(() => {
        //   router.push('/game')
        // }, 100)
      },
      // 验证失败时触发该回调参数
      fail: function (failCode) {
        console.log(failCode);
      },
      // 验证码加载异常时触发该回调参数
      error: function (errorCode) {
        console.log(errorCode);
      }
    });
  });
};

// 获取游戏剩余次数
function getGameTimes() {
  gameTimes().then(res => {
    const { data = {} } = res
    if (data.remain_game_num  < 1) {
      state.popoverTimes = true;
      state.popoverTimesTitle = '很遗憾'
      state.popoverTimesMsg = '今日次数已用完，请明日再来';
      // state.popoverTimesIcon = ''
      // state.popoverTimesTips = false
      return;
    } else {
      router.push('/game');
    }
  }).catch((e) => {
    state.popoverTimes = true;
    state.popoverTimesTitle = ''
    state.popoverTimesMsg = e.msg;
  })
}

async function goGame() {
  const resp = await userActivity()
  
  console.log(resp,'respresprespresprespresprespresp')
  if (resp.error_code !== 0) {
    state.gameTips = resp.msg
    close.value = false
    state.showGameOver = true
    return
  }
  getUserData().then(async res => {
    const { data } = res;

    data && utils.setUserInfo(data);
    if (data.is_robot) {
      // state.myDialog = true;
      awscShow.value = true;
      await nextTick();
      !ic && initSlider(({ sessionId, sig, token }) => {
        const params = new FormData();

        // params.append('sessionId', sessionId);
        // params.append('sig', sig);
        // params.append('token', token);
        // params.append('scene', scene);
        userAuth({sessionId,sig,token,scene}).then(res => {
          if (res.error_code === 0) {
            ic.reset();
            awscShow.value = false;
            router.push('/game');
            // getGameTimes();
          }
        })
      });
    } else {
      router.push('/game')
      // getGameTimes();
    }
  })
}
function handleShare() {
  if (utils.getOperationEnvironment() == "uni_mini") {
    console.log("uni_mini")
    state.show_share_indication = true;
  } else {
    console.log("app")
    utils.callAppShare()
  }

  // 记录分享
  shareRecord()
}

// 周度奖品
function handleGetWeekGift() {
  // weekGift().then(res => {
  //   const { data } = res;
  //   if (!data) return;

  //   state.PopoverRank = true;
  //   state.popoverRack = data.rack;
  //   state.popoverMsg = `获得${data.name}${data.content}`;
  //   state.popoverIcon = data.icon;
  // }).catch(e => {
  //   setTimeout(() => {
  //     if (state.errNum < 10) {
  //       state.errNum++;
  //       handleGetWeekGift();
  //     }
  //   }, 100)
  // })
}
// 保存用户手机号地址
function handlePrizeClose(params) {
  state.prizePage = false
  
  userInfoModify(params)
}
function goRanking() {

  // router.push("/ranking")
  router.replace("/ranking")
}

onMounted(() => {
  // const isLogin = utils.getIsLogin();
  // setTimeout(() => {
    // handleGetWeekGift();
  // }, 800)
  // state.time = new Date().getTime()
  // getData().then(res=>{
  //   console.log(res);
  // })
  // window.game = null;
})
</script>
<style  scoped>
/* .home-box ::v-deep(.van-dialog) {
  width: 615px;
}
.home-box ::v-deep(.van-dialog__footer) {
  padding: 10px 0;
} */
.home-box ::v-deep(.van-action-sheet__header) {
  font-size: 30px;
}
.home-box ::v-deep(.van-action-sheet__close) {
  font-size: 36px;
}
.awsc-content {
  display: flex;
  justify-content: center;
}
#sc {
  margin: 50px 0 80px 0;
}
.home-box {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  /* background: url("/images/home/bg.jpg") no-repeat;
  background-size: cover; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* object-fit: cover; */
}

.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 180px;
  left: 0;
  -webkit-animation: bounce-in-top 1.1s .1s both;
  animation: bounce-in-top 1.1s .1s both;



}
@keyframes finger {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, 0);
}
}
.handicon {
  width: 75px;
  position: absolute;
  right: -30px;
  bottom: -10px;
  animation: finger 1s infinite;
}
.title>img {
  width: 566px;

}

.footer {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 333px;
  background: url("https://yinli-qixi-run.varwey.com/2023_ca/chess1026/images/home/footer_bg.png") no-repeat;
  background-size: cover;
  padding-top: 20px;
  box-sizing: border-box;
}

.footer .box_shadow {
  width: 255px;
  height: 66px;
  margin-top: 100px;
  /* box-shadow: 7px 10px 35px rgba(23, 105, 175, .57); */
  border-radius: 30px;
  position: relative;
}
 .box_shadow+.box_shadow {
  margin-top: 30px;
 }

.footer .tr_t {
  width: 100%;
  height: 100%;
  margin-top: -3px;
  text-align: center;
  line-height: 65px;
  color: rgb(208, 57, 28);
  font-family: "ChangAnunitype-Bold";
  font-size: 36px;
  letter-spacing: 4px;
  background: url("https://yinli-qixi-run.varwey.com/2023_ca/chess1026/images/home/btn_bg.png") no-repeat;
  background-size: 100% 100%;
}

.btn {
  position: absolute;
  bottom: 10vh;
  width: 351px;
  height: 92px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #020101;
  border-radius: 46px;
  font-family: "ChangAnunitype-Bold";
  font-size: 46px;
  letter-spacing: 4px;
  background-color: #ff4a62;
  color: #fff;
  /* transition: all 0.4s; */
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}

.btn:hover {
  background-color: #9bdced;
  color: #2e669f;
  border: 1px solid #0f5ba8;

}

.rule-prize {
  position: absolute;
  right: 0;
  top: 100px;
  /* width: 120px; */
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
}

.rule-prize .toolbar-btn {
  margin-bottom: 10px;
  padding: 0.5px 0 0.5px 0.5px;
}

.rule-prize .text-vertical {
  /* writing-mode: vertical-rl; */
  display: flex;
  flex-direction: column;
  /* text-orientation: mixed; */
  background: rgb(198, 124, 74);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  line-height: 1;
  padding: 10px 8px;
  color: #fff;
}

.rule-prize>img {
  width: 100%;
}

.rule-prize>div {
  width: 100%;
  font-family: "ChangAnunitype-Regular";
  font-size: 30px;
  /* padding: 5px 0px; */
  /* background-color: rgba(0, 0, 0, 0.2); */
  /* background-color: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  letter-spacing: 2px;
}

.share_btn {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #ff4a62; */
  z-index: 1;
}

.share_btn>img {
  width: 53px;
  height: 53px;
}

.share_indication {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 9;
  background: rgba(0, 0, 0, 0.8);
}

.share_indication>img {
  width: 500px;
  position: absolute;
  top: 20px;
  right: 140px;
}


@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* 

动画参考
https://animista.net/play/basic
*/

/* ----------------------------------------------
 * Generated by Animista on 2023-5-6 10:27:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/* @media all and (min-width:414px) {
  .title {
    top: 5vw;
  }

  .title>img {
    width: 70vw;
  }
} */
</style>